<!DOCTYPE html>
<!-- saved from url=(0048)http://www.jq22.com/demo/upload_img201709171905/ -->
<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

		<meta http-equiv="x-ua-compatible" content="ie=edge">
		<meta name="robots" content="all">
		<title>上传图片，可调图片宽高</title>
		<meta name="keywords" content="">
		<meta name="description" content="">
		<link rel="stylesheet" type="text/css" href="ycbootstrap.css">
		<link rel="stylesheet" type="text/css" href="reset.css">
		<script src="jquery-1.9.1.js"></script>
		<script src="jquery.min.js"></script>
		<script src="iscroll-zoom.js" type="text/javascript" charset="utf-8"></script>
		<script src="hammer.js" type="text/javascript" charset="utf-8"></script>
		<script src="lrz.all.bundle.js" type="text/javascript" charset="utf-8"></script>
		<script src="jquery.photoClip.min.js" type="text/javascript" charset="utf-8"></script>

	</head>

	<body>

			<div class="cover-wrap" style="position: fixed; left: 0px; top: 0px; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.4); z-index: 10000000; text-align: center; display: none;">
				<div class="" style="width:900px;height:600px;margin:100px auto;background-color:#FFFFFF;overflow: hidden;border-radius:4px;">
					<div id="clipArea" style="margin: 10px; height: 520px; user-select: none; overflow: hidden; position: relative;">
					</div>
				</div>
				<div class="" style="height:56px;line-height:36px;text-align: center;padding-top:8px;">
					<button id="clipBtn" style="width:120px;height: 36px;border-radius: 4px;background-color:#ff8a00;color: #FFFFFF;font-size: 14px;text-align: center;line-height: 36px;outline: none;">保存封面</button>
				</div>
			</div>
		<div id="view" style="width: 214px; height: 160.5px; background-color: rgb(102, 102, 102); background-repeat: no-repeat; background-position: center center; background-size: contain;" title="请上传 428*321 的封面图片"></div>
		<div class="" style="width:140px;height:32px;border-radius: 4px;background-color:#ff8a00;color: #FFFFFF;font-size: 14px;text-align:center;line-height:32px;outline:none;margin-left:37px;position:relative;">
			点击上传封面图
			<input type="file" id="file" style="cursor:pointer;opacity:0;filter:alpha(opacity=0);width:100%;height:100%;position:absolute;top:0;left:0;" accept="image/*">
		</div>

		<script type="text/javascript">
			//上传封面
			//document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
			var clipArea = new bjj.PhotoClip("#clipArea", {
				size: [428, 321], // 截取框的宽和高组成的数组。默认值为[260,260]
				outputSize: [428, 321], // 输出图像的宽和高组成的数组。默认值为[0,0]，表示输出图像原始大小
				//outputType: "jpg", // 指定输出图片的类型，可选 "jpg" 和 "png" 两种种类型，默认为 "jpg"
				file: "#file", // 上传图片的<input type="file">控件的选择器或者DOM对象
				view: "#view", // 显示截取后图像的容器的选择器或者DOM对象
				ok: "#clipBtn", // 确认截图按钮的选择器或者DOM对象
				loadStart: function() {
					// 开始加载的回调函数。this指向 fileReader 对象，并将正在加载的 file 对象作为参数传入
					$('.cover-wrap').fadeIn();
					console.log("照片读取中");
				},
				loadComplete: function() {
					// 加载完成的回调函数。this指向图片对象，并将图片地址作为参数传入
					console.log("照片读取完成");
				},
				//loadError: function(event) {}, // 加载失败的回调函数。this指向 fileReader 对象，并将错误事件的 event 对象作为参数传入
				clipFinish: function(dataURL) {
					// 裁剪完成的回调函数。this指向图片对象，会将裁剪出的图像数据DataURL作为参数传入
					$('.cover-wrap').fadeOut();
					$('#view').css('background-size', '100% 100%');
					console.log(dataURL);
				}
			});
			//clipArea.destroy();
		</script>

	</body>

</html>